<template>
	<div id="start">
		
		<div  class="start_content">			
			
			<header class="start_header">				
				<img src="../assets/images/canju.png"/> 修改用餐人数
			</header>			
			
			<p class="notice">请选择正确的用餐人数 </p>
						
			<div class="content">
				<ul class="user_list">
					<li v-for="(item,key) in urserList" :class="{active:parseInt(popleList.p_num)==(key+1)}">						
						<span>{{item}}</span>
					</li>
					
									
				</ul>
				
				<p class="mark_input">
					<input type="text" placeholder="请备注" v-model="markText"/>
				</p>
				<ul class="mark_list">
					<li><span>打包</span></li>
					<li><span>不要辣椒</span></li>
					<li><span>微辣</span></li>
				</ul>
			</div>
				
		</div>
		
		
		<div id="start_cancel" class="start_cancel">
                <router-link to="/cart">                
                    <span>
                            取消
                    </span>     
                </router-link>               
            </div>
           
            <div id="start_ok" class="start_ok" @click="requsetData()">                
                <span>
                        确定修改
                </span>                
            </div>
	 	
		
	</div>
</template>
<script>
//引入公共配置文件
import Config from '../model/config.js';
	export default {
	 
	  data () {
	    return {
	    api:Config.host,
	      userPeopleNum:"",
	      markText:"",
	      urserList:[],
	      popleList:[]
	    }
	  },
	  methods:{
	  
	  	choosePeopleNum(){
	  			var that=this;
	  		var user_list=document.querySelectorAll(".user_list li");
	  		var mark_list=document.querySelectorAll(".mark_list li");
	  		
	  		for(var i=0;i<user_list.length;i++){
	  			user_list[i].onclick=function(){
	  				
	  				for(var j=0;j<user_list.length;j++){
	  					user_list[j].className="";
	  				}
	  				
	  				this.className="active";
	  				that.userPeopleNum=this.querySelector("span").innerHTML.trim();
	  				
	  			}
	  		}
	  		
	  		for(var i=0;i<mark_list.length;i++){
	  			mark_list[i].onclick=function(){
	  				
	  				for(var j=0;j<mark_list.length;j++){
	  					mark_list[j].className="";
	  				}
	  				
	  				this.className="active";
	  				that.markText+=this.querySelector("span").innerHTML+" ";
	  				
	  			}
	  		}
	  	},
	  	requsetData(){
	  		var api=this.api+"api/addPeopleInfo";

			  
			 this.$http.post(api,{
			            uid:'a002',
			            p_num:this.userPeopleNum,
			            p_mark:this.markText
			}).then((response)=>{
			
			    if(response.body.success){
			
			        this.$router.push({ path: 'home' })
			    }
			                        
			},(err)=>{
			
			    console.log(err);
			})
	  },
	  getPeopleInfo(){
	  	
	  	var api=this.api+"api/peopleInfoList?uid=a002";

			  
			 this.$http.get(api).then((response)=>{
			 	//console.log(response);
			 	this.popleList=response.body.result[0];
			 	
			 	//console.log(this.popleList);
				this.markText=this.popleList.p_mark;
			  
			  
			 // console.log();
			                        
			},(err)=>{
			
			    console.log(err);
			})
	  	
	  	
	  }
	  ,
	  peoplelist(){
		  	for(var i=1;i<=12;i++){
		  		this.urserList.push(i+"人")
		  		
		  		
		  		
		  	}
		  	
		  	
		}
	  	
	  },
	  mounted(){
	  	
	  	
	  	this.peoplelist();
	  	
	  	this.$nextTick(function(){

			this.choosePeopleNum();
			
		});
		
		this.getPeopleInfo();
	  }
	}
</script>
<style lang="scss">
.start_content{
    
    
    
    .start_header{
        
        height: 3.2rem;
        
        line-height: 3.2rem;
        background: #000;
        
        color: #fff;
        
        width: 10rem;
        
        margin: 5rem auto 0rem auto;
        
        border-radius: .5rem;
        
        img{
            
            height:2.2rem;
            
            line-height: 2.2rem;
            position: relative;
            
            top:.5rem;
            margin-left: 1rem;
        }
    }
    
    
    .notice{
        
        color: red;
 
        text-align: center;
        
        
        margin:1rem 0rem;
        
        
    }
    
    .user_list,.mark_list{
        
        display: flex;
        
        flex-wrap: wrap;
        padding: .5rem;
        
        li{
            
             width: 25%;
             padding: .5rem;             
             box-sizing: border-box;   /*盒子的宽度=盒子本身宽度    默认 盒子的宽度=盒子的宽度+padding+border*/
             
             span{
                 
                 display: block;
                 
                 width: 100%;
                 height: 3.2rem;
                 
                 line-height: 3.2rem;
                 text-align: center;
                 background: #fff;
                 border-radius: .5rem;
                 border: 1px solid #ccc;
             }
            
        }
        li.active{
        	span{
        		border:1px solid red;
	        	color:#fff;
	        	background: red;
        	}
        	
        }
        
        
    }
    .mark_input{
    	padding:1rem;
    	width:100%;
    	box-sizing: border-box;
    	input{
    		width:100%;
    		height:3rem;
    		box-sizing: border-box;
    		line-height:3rem;
    		border:1px solid #ccc;
    		padding-left: .5rem;
    	}
    }
    
    
}

.start{
    
    position: fixed;
    
    bottom: 5rem;
    
    left: 50%;
    margin-left: -3rem;
    
    width: 6rem;
    
    height: 6rem;
    
    border-radius: 50%;
    
    background: red;
    color: #fff;
    
    span{
        
        display: block;
        
        width: 2rem;
        
        margin: 0 auto;
        
        position: relative;
        
        top:1.5rem;
    }
    
  }
.start_cancel ,.start_ok{
  position: fixed;
  bottom: 4rem;
  left: 6rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: red;
  
  a{
  	color:#fff;
  	
  	span{
  		display: block;
		  width: 2rem;
		  margin: 0 auto;
		  position: relative;
		  top: 1.5rem;
		}
  	
  }
}

.start_ok{
	

  right: 6rem;
left:auto;
color:#fff;

span{
	  display: block;
  width: 2rem;
  margin: 0 auto;
  position: relative;
  top: 0.5rem;
}
}

	
</style>